其他
【每日一练】59—写一个中秋月饼的响应式卡片
写在前面
时间的车轮就这样不知不觉中把我们带到了2022年的中秋节,在这里,我先祝大家中秋节快乐!
有时候真的很感慨,时间的魔力,哪些我们曾想的遥远时间,就这样姗姗而来。
我是从2013年注册营运【web前端开发】公号,一直到今天,已是第10个年头了,其实,坚持做一件事情,真的很不容易,但是,时间也慢慢的把我带了过来。
现在,我们每天写一点点的小练习,每天坚持学习一点点,每天坚持进步一点点,这也不是一件容易的事情,但是只要坚持去做,时间就会把我们带到那个曾经觉得遥远的地方。
我在开设【每日一练】栏目的时候,我就曾说过,我们先写满100个小练习,就这样持续的学习,我们居然在不知不觉中写到了第59个小项目练习了。
希望你能继续持续学习,坚持练习,也希望这些小项目能够帮助到你。
因为今天是中秋节,我们就一起来写一个与中秋有关的响应式产品卡,现在我们一起来看一下它的最终效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>【每日一练】59—写一个中秋月饼的响应式卡片</title>
<!--icon 文件-->
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<section class="mooncake">
<div class="center">
<h1>祝大家中秋节快乐!</h1>
</div>
<div class="mooncake-content">
<div class="box">
<a href="http://www.webqdkf.com " target="_blank">
<img src="images/01.png" alt="中秋节月饼"></a>
<h3>冰鲜月饼</h3>
<h5>冰淇淋+巧克力</h5>
<h6>¥99/盒</h6>
<div class="icons">
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-qq' ></i></a>
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-wechat'></i></a>
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-weibo' ></i></a>
</div>
</div>
<div class="box">
<a href="http://www.webqdkf.com " target="_blank">
<img src="images/02.png" alt="中秋节月饼"></a>
<h3>冰鲜月饼</h3>
<h5>冰淇淋+巧克力</h5>
<h6>¥99/盒</h6>
<div class="icons">
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-qq' ></i></a>
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-wechat'></i></a>
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-weibo' ></i></a>
</div>
</div>
<div class="box">
<a href="http://www.webqdkf.com " target="_blank">
<img src="images/03.png" alt="中秋节月饼"></a>
<h3>冰鲜月饼</h3>
<h5>冰淇淋+巧克力</h5>
<h6>¥99/盒</h6>
<div class="icons">
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-qq' ></i></a>
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-wechat'></i></a>
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-weibo' ></i></a>
</div>
</div>
<div class="box">
<a href="http://www.webqdkf.com " target="_blank">
<img src="images/04.png" alt="中秋节月饼"></a>
<h3>冰鲜月饼</h3>
<h5>冰淇淋+巧克力</h5>
<h6>¥99/盒</h6>
<div class="icons">
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-qq' ></i></a>
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-wechat'></i></a>
<a href="http://www.webqdkf.com" target="_blank"><i class='fa fa-weibo' ></i></a>
</div>
</div>
</div>
</section>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Space Grotesk', sans-serif;
text-decoration: none;
}
.mooncake{
position: relative;
width: 100%;
height: 100vh;
background: radial-gradient(#F675A8,#554994);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.mooncake-content{
width: 100%;
max-width: 1350px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, auto));
align-items: center;
gap: 2rem;
text-align: center;
margin-top: 4rem;
}
.mooncake-content img{
width: 100%;
height: auto;
border-radius: 15px;
margin-bottom: 15px;
}
.center h1{
color: #fff;
font-size: 4rem;
text-align: center;
}
.box{
padding: 16px;
background:#554994;
border-radius: 15px;
transition: all .38s ease;
}
.box h3{
font-size: 23px;
font-weight: 600;
color: #fff;
margin-bottom: 8px;
}
.box h5{
font-size: 15px;
font-weight: 600;
color: #8e8c92;
margin-bottom: 15px;
letter-spacing: 2px;
}
.box h6 {
color: #F675A8;
font-size: 20px;
font-weight: 600;
margin-bottom:15px;
}
.icons i{
display: inline-block;
color: #eee;
font-size: 20px;
margin: 0 8px;
transition: all .38s ease;
}
.icons i:hover{
transform: scale(1.2);
}
.box:hover{
transform: translateY(-10px);
cursor: pointer;
}
@media(max-width: 1240px){
.team{
width: 100%;
height: auto;
padding: 90px 2%;
}
.center h1{
font-size: 3.2rem;
}
}
写在最后
今天的【每日一练】内容就先分享到这里,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号